<template>
    <view>
        <status-bar title="订单详情"></status-bar>
        <view class="rowTop d-flex a-center">
            <view class="flex-1 d-flex f-column">
                <text class="color_FF8 size30 bold">{{ pageData.page_title }}</text>
                <text class="color_33 h6 m-top20 m-right20">{{ pageData.page_content }}</text>
                <!-- <text class="color_33 h6 m-top20">请在 {{ pageData.reservationDate }} 前达指定地点</text> -->
            </view>
            <image :src="$online('over.png')" class="over m-right20"></image>
            <!-- <image :src="$online('tools.png')" class="tools m-right20"></image> -->
        </view>
        <!-- <view class="rowTop d-flex a-center" v-if="pageData.state == 2">
            <view class="flex-1 d-flex f-column">
                <text class="color_FF8 size30 bold">已送达</text>
                <text class="color_33 h6 m-top20">于 {{ pageData.endDate }} 送达</text>
            </view>
            <image :src="$online('over.png')" class="over m-right20"></image>
        </view> -->

        <view class="rows m-top30 bgwhite">
            <view class="d-flex f-column padding30 bot">
                <view class="d-flex a-center">
                    <text class="black size30 bold" selectable>{{ pageData.res_name }}</text>
                    <text class="black size30 m-left30" selectable @click="$common.Tel(pageData.res_tel)">{{ pageData.res_tel }}</text>
                </view>
                <text class="size26 color_33 m-top20" selectable @click="openLocat">{{ pageData.res_address }}</text>
            </view>
            <view class="row padding20">
                <text class="size26 color_99">备注信息</text>
                <view class="flex-1 m-left30 color_33 h6" v-if="pageData.remarks">{{ pageData.remarks }}</view>
            </view>
        </view>

        <view class="row bgwhite m-top30 padding30">
            <view class="row a-center">
                <view class="iconfont icon-a-010 color_33 size34"></view>
                <text class="color_33 size26 m-left10">直营店</text>
            </view>

            <view class="row m-top20" v-for="(item, index) in pageData.goodsList" :key="index">
                <image :src="$imgUrls(item.photo)" mode="aspectFill" class="proct_img m-right30"></image>
                <view class="flex-1 d-flex f-column j-sb height">
                    <text class="ellipsis_2 color_33 size30 bold500">{{ item.name }}</text>

                    <view class="row j-sb a-center">
                        <text class="color_ff2 size32 bold500" v-if="item.price">￥{{ item.price }}</text>
                        <view class="d-flex a-center color_ff2" v-if="item.num">
                            <text class="size26">x {{ item.num }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="row m-top30 bgwhite">
            <view class="row a-center j-sb padding20-30 h6">
                <view class="d-flex a-center">
                    <text class="color_99 m-right50 size26">订单编号</text>
                    <text class="black size26">{{ pageData.order_code }}</text>
                </view>
                <text class="color_32 size26" @click="$pop.setClip(pageData.order_code)">复制</text>
            </view>
            <view class="row a-center padding20-30 h6">
                <text class="color_99 m-right50 size26">下单时间</text>
                <text class="black size26">{{ pageData.addDate }}</text>
            </view>
            <view class="row a-center padding20-30 h6">
                <text class="color_99 m-right50 size26">分配时间</text>
                <text class="black size26">{{ pageData.allocateDate }}</text>
            </view>
        </view>

        <view class="footer" v-if="butList.length">
            <view class="foterBox">
                <view class="btnlist" :style="{ backgroundColor: item.title_colour }" v-for="(item, index) in butList" :key="index" @click="Operation(item)">{{ item.title }}</view>
            </view>
        </view>

        <view class="maskings d-flex f-column j-end" v-if="show">
            <view class="rows popupCon bgwhite">
                <view class="u-popup">
                    <view class="row j-centert black size30 bold500">提交前请先与用户进行沟通确认</view>
                    <textarea class="textarea" v-model="end_content" disable-default-padding placeholder="请输入失败原因"></textarea>
                    <view class="row m-top20">
                        <view class="uploads flexac" @click="uploads" v-if="end_photo.length < 9">
                            <view class="iconfont icon-xiangji"></view>
                        </view>
                        <view class="uploadList" v-for="(item, index) in end_photo" :key="index">
                            <image :src="$imgUrls(item)" mode="aspectFill" class="uploadImg"></image>
                            <view class="iconfont icon-close-f color_FF3 size34" @click.stop="delImg(index)"></view>
                        </view>
                    </view>
                </view>
                <view class="fot d-flex m-top80">
                    <view class="flex-1 cancel_fot flexac size30" @click.stop="show = false">取 消</view>
                    <view class="flex-1 sub_fot flexac size30" @click="operateOrder(3)">提 交</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                res_id: '',
                pageData: '',
                butList: [],
                end_content: '',
                end_photo: '',
                code: '',
                show: false
            };
        },
        onLoad(opt) {
            if (opt.res_id) this.res_id = opt.res_id;
            this.apiOrderInfo();
        },
        methods: {
            apiOrderInfo() {
                this.$http
                    .post({
                        url: '/selfDeliveryApi/apiOrderInfo',
                        data: {
                            res_id: this.res_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data || '';
                        const butList = res.buttonList || [];
                        this.pageData = result;
                        this.butList = butList;
                    });
            },
            async Operation(item) {
                const prompt_box = item.prompt_box;
                if (prompt_box.state == 1) {
                    const flag = await this.$Modals('提示', prompt_box.content);
                    if (!flag) return;
                    this.OrderState(prompt_box.post_data.state);
                } else {
                    this.OrderState(prompt_box.post_data.state);
                }
            },
            OrderState(state) {
                if (state == 3) return (this.show = true);
                this.operateOrder(state);
            },
            operateOrder(state) {
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/selfDeliveryApi/operateOrder',
                        data: {
                            res_id: this.res_id,
                            state,
                            end_content: this.end_content,
                            end_photo: this.end_photo,
                            code: this.code
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        this.show = false;
                        if (res.code != 100) return this.$Toast(res.msg);
                        this.$Toast(res.msg);
                        this.apiOrderInfo();
                    });
            },
            async uploads() {
                const count = 9 - this.end_photo.length;
                const list = await this.$common.chooseImage(count);
                if (!list.length) return;
                this.end_photo = [...this.end_photo, ...list];
            },
            delImg(index) {
                this.end_photo.splice(index, 1);
            }
        },
        computed: {
            stateTxt() {
                if (!this.pageData) return;
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
        // padding-bottom: 30rpx;
        padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
    }
</style>
<style lang="scss" scoped>
    .rowTop {
        width: 100%;
        padding: 50rpx 30rpx;
        background-color: #ffffff;
        .tools {
            display: block;
            width: 82rpx;
            height: 82rpx;
        }

        .over {
            width: 73rpx;
            height: 76rpx;
        }
    }
    .proct_img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
    }
    .popupCon {
        border-radius: 20rpx 20rpx 0 0;
        .u-popup {
            width: 100%;
            padding: 36rpx 30rpx 0 30rpx;
            .textarea {
                width: 100%;
                height: 300rpx;
                border: 1rpx solid #ccc;
                border-radius: 10rpx;
                margin-top: 34rpx;
                padding: 20rpx;
                font-size: 26rpx;
                color: #000;
            }
            .uploads {
                width: 130rpx;
                height: 130rpx;
                border-radius: 6rpx;
                background-color: #f3f7ff;
                margin-right: 20rpx;
                margin-top: 20rpx;
                .icon-xiangji {
                    color: #cbd5ea;
                    font-size: 76rpx;
                }
            }
            .uploadList {
                width: 130rpx;
                height: 130rpx;
                margin-right: 20rpx;
                margin-top: 20rpx;
                position: relative;
                .uploadImg {
                    width: 130rpx;
                    height: 130rpx;
                    border-radius: 8rpx;
                    overflow: hidden;
                }
                .icon-close-f {
                    position: absolute;
                    top: 2rpx;
                    right: 2rpx;
                    background-color: #ffffff;
                    border-radius: 50%;
                }
            }
        }
        .fot {
            width: 100%;
            height: 90rpx;
            overflow: hidden;
            border-radius: 20rpx 20rpx 0 0;
            box-sizing: content-box;
            padding-bottom: constant(safe-area-inset-bottom);
            /*兼容 IOS<11.2*/
            padding-bottom: env(safe-area-inset-bottom);
            .sub_fot {
                height: 100%;
                background-color: #6f92fa;
                color: #ffffff;
            }

            .cancel_fot {
                height: 100%;
                background-color: #d7dcea;
                color: #8a90a2;
            }
        }
    }
    .footer {
        width: 100%;
        background-color: #ffffff;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;

        .foterBox {
            width: 100%;
            height: 100rpx;
            padding: 0 20rpx;
            display: flex;
            justify-content: space-around;
            .btnlist {
                flex: 1;
                height: 80rpx;
                margin: 0 10rpx;
                font-size: 28rpx;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10rpx;
                margin-top: 10rpx;
            }
        }
    }
</style>
